import React, { useState, useEffect } from 'react'
import Taro from '@tarojs/taro'
import './index.scss'
import { View } from '@tarojs/components'
import {
  AtList,
  AtListItem,
  AtPagination,
  AtActivityIndicator,
  AtMessage
} from 'taro-ui'
import { useStore } from '../../../../model/index'
import { searchLists, getRankLists } from '../../../../api/index'

interface ListArrResType {
  OfficialVerifyDesc: string
  face: string
  name: string
  fans: number
  mid: number
}

interface incRankListResType {
  fans: number
  incDecNumber: number
  name: string
  imageUrl: string
  mid: number
}

export default () => {
  const [state, actions] = useStore('Index')
  const [total, setTotal] = useState(0)
  const [current, setCurrent] = useState(1)
  const [loading, setLoading] = useState(true)
  const [upInformationList, setUpInformationList] = useState<ListArrResType[]>(
    []
  )
  const [decList, setdecList] = useState<incRankListResType[]>([])

  useEffect(() => {
    // 只要搜索，更改一级标签，二级标签，都会触发list更新
    console.log('触发useEffect_3')
    setLoading(true)
    ;(async () => {
      let params = {}

      if (state.keyword) {
        /**
         * @description有搜索有三种情况
         * 第一层级为全部，第二层级只有全部，此时tid和level不传
         * 第一层级为其他，第二层级为全部，tid传第一层级的，level是1
         * 第一层级为其他，第二层级为其他，tid传第二层级，level是2
         */

        if (state.firstBtn === -1) {
          params = {
            page: 1,
            keyword: state.keyword,
            sortType: 0,
            level: 1,
            tid: ''
          }
        } else if (state.firstBtn !== -1 && state.secondBtn === -1) {
          params = {
            page: 1,
            level: 1,
            tid: state.firstBtn,
            keyword: state.keyword,
            sortType: 0
          }
        } else {
          params = {
            page: 1,
            level: 2,
            tid: state.secondBtn,
            keyword: state.keyword,
            sortType: 0
          }
        }
        const {
          data: { data, errorCode, errorMessage }
        } = await searchLists(params)

        if (errorCode === 0) {
          setUpInformationList(data.upList)
        } else {
          Taro.atMessage({
            message: `${errorMessage},请充值`,
            type: 'error'
          })
        }
        setTotal(data.total)
        setLoading(false)
        console.log(data)
      } else {
        /**
         * @description无搜索层级有三种情况
         * 第一层级为全部，第二层级只有全部，此时tid和level不传
         * 第一层级为其他，第二层级为全部，tid传第一层级的，level是1
         * 第一层级为其他，第二层级为其他，tid传第二层级，level是2
         */
        if (state.firstBtn === -1) {
          params = {
            page: 1,
            pageSize: 10,
            rankType: 1,
            time: new Date().getTime()
          }
        } else if (state.firstBtn !== -1 && state.secondBtn === -1) {
          params = {
            page: 1,
            pageSize: 10,
            rankType: 1,
            time: new Date().getTime(),
            level: 1,
            tid: state.firstBtn
          }
        } else {
          params = {
            page: 1,
            pageSize: 10,
            rankType: 1,
            time: new Date().getTime(),
            level: 2,
            tid: state.secondBtn
          }
        }
        const {
          data: { data, errorCode, errorMessage }
        } = await getRankLists(params)

        if (errorCode === 0) {
          setdecList(data.decRankData)
        } else {
          Taro.atMessage({
            message: `${errorMessage},请充值`,
            type: 'error'
          })
        }
        setTotal(data.total)
        setLoading(false)
      }
    })()

    setCurrent(1)
  }, [state.firstBtn, state.secondBtn, state.keyword])

  const tapToDetail = (id) => {
    Taro.navigateTo({
      url: `/package/personal/index?id=${id}`
    })
  }

  const setLists = () => {
    // 防止异常情况
    // if (!upInformationList) setUpInformationList([])

    if (upInformationList.length !== 0 || decList.length !== 0) {
      if (state.keyword) {
        console.log(upInformationList, '-=-==-=-')

        return upInformationList.map((item) => {
          return (
            <AtListItem
              title={item.name}
              arrow="right"
              thumb={item.face}
              note={item.OfficialVerifyDesc || '这个UP很懒,什么都没留下'}
              extraText={(item.fans / 10000).toFixed(1) + '万粉丝'}
              onClick={() => tapToDetail(item.mid)}
            />
          )
        })
      } else {
        return decList.map((item) => {
          return (
            <AtListItem
              title={item.name}
              arrow="right"
              thumb={item.imageUrl}
              note={(item.fans / 10000).toFixed(1) + '万粉丝'}
              extraText={item.incDecNumber + ''}
              onClick={() => tapToDetail(item.mid)}
            />
          )
        })
      }
    }
  }

  const onPageChange = (data) => {
    let { current } = data
    setCurrent(current)
    setLoading(true)
    // console.log(current)
    ;(async () => {
      let params = {}

      if (state.keyword) {
        /**
         * @description有搜索有三种情况
         * 第一层级为全部，第二层级只有全部，此时tid和level不传
         * 第一层级为其他，第二层级为全部，tid传第一层级的，level是1
         * 第一层级为其他，第二层级为其他，tid传第二层级，level是2
         */

        if (state.firstBtn === -1) {
          params = {
            page: current,
            keyword: state.keyword,
            sortType: 0,
            level: 1,
            tid: ''
          }
        } else if (state.firstBtn !== -1 && state.secondBtn === -1) {
          params = {
            page: current,
            level: 1,
            tid: state.firstBtn,
            keyword: state.keyword,
            sortType: 0
          }
        } else {
          params = {
            page: current,
            level: 2,
            tid: state.secondBtn,
            keyword: state.keyword,
            sortType: 0
          }
        }
        const {
          data: { data, errorCode, errorMessage }
        } = await searchLists(params)

        if (errorCode === 0) {
          setUpInformationList(data.upList)
        } else {
          Taro.atMessage({
            message: `${errorMessage},请充值`,
            type: 'error'
          })
        }
        setTotal(data.total)
        setLoading(false)
      } else {
        /**
         * @description无搜索层级有三种情况
         * 第一层级为全部，第二层级只有全部，此时tid和level不传
         * 第一层级为其他，第二层级为全部，tid传第一层级的，level是1
         * 第一层级为其他，第二层级为其他，tid传第二层级，level是2
         */
        if (state.firstBtn === -1) {
          params = {
            page: current,
            pageSize: 10,
            rankType: 1,
            time: new Date().getTime()
          }
        } else if (state.firstBtn !== -1 && state.secondBtn === -1) {
          params = {
            page: current,
            pageSize: 10,
            rankType: 1,
            time: new Date().getTime(),
            level: 1,
            tid: state.firstBtn
          }
        } else {
          params = {
            page: current,
            pageSize: 10,
            rankType: 1,
            time: new Date().getTime(),
            level: 2,
            tid: state.secondBtn
          }
        }
        const {
          data: { data, errorCode, errorMessage }
        } = await getRankLists(params)

        if (!errorCode) {
          setdecList(data.decRankData)
        } else {
          Taro.atMessage({
            message: `${errorMessage},请充值`,
            type: 'error'
          })
        }
        setTotal(data.total)
        setLoading(false)
      }
    })()
  }

  return (
    <View className="at-list-wrap">
      {loading ? (
        <AtActivityIndicator mode="center"></AtActivityIndicator>
      ) : (
        <View>
          <AtList>{setLists()}</AtList>
          <AtPagination
            icon
            total={total}
            pageSize={10}
            current={current}
            onPageChange={onPageChange}
          ></AtPagination>
        </View>
      )}
    </View>
  )
}
